<div>
    <!--TODO why need define padding = 0 ? -->
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'sidebar'"
         class="fillWidth fillHeight" style="padding: 0;">
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="splitter: true, region: 'leading'"
             style="width: 35%">
            <div data-dojo-type="scopt/store/DataStore"
                 data-dojo-attach-point="messagesStore"
                 data-dojo-id="${id}_messagesStore"
                 data-dojo-props="message: 'devel.mpu_list'">
                <script type="dojo/method" data-dojo-event="getChildren" data-dojo-args="object">
                    return this.query({parent: object.id});
                </script>
            </div>
            <div  data-dojo-type="dijit/tree/ObjectStoreModel"
                  data-dojo-attach-point="messagesModel"                 
                  data-dojo-id="${id}_messagesModel"
                  data-dojo-props="store: ${id}_messagesStore, query: {id: 'scopt'}">
                <script type="dojo/method" data-dojo-event="mayHaveChildren" data-dojo-args="item">
                    return item.type !== "message";
                </script>
            </div>
            <div data-dojo-type="dijit/Tree"
                 data-dojo-attach-point="messagesTree"
                 data-dojo-props="model: ${id}_messagesModel, showRoot: false, persist: false"
                 data-dojo-attach-event="onClick: _selectItem"></div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="splitter: true, region: 'center'">
            <div data-dojo-attach-point="messageNode" 
                 class="noneDisplay">
                <h3 data-dojo-attach-point="messageTitle"></h3>
                <p>${messages.version} <span data-dojo-attach-point="messageVersion"></span></p>
                <p data-dojo-attach-point="messageDoc"></p>                
                <div class="twoColumns fillWidth">
                    <div class="column1">
                        <label>${messages.request}</label>
                        <textarea data-dojo-type="dijit/form/Textarea"
                                  data-dojo-attach-point="messageRequest"
                                  readonly="true"></textarea>
                    </div>
                    <div class="column2">
                        <label>${messages.response}</label>
                        <textarea data-dojo-type="dijit/form/Textarea"
                                  data-dojo-attach-point="messageResponse"
                                  readonly="true"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>